doctype html
head
	-var resource = "/static/"
	//-var resource = ""
	meta(charset="UTF-8")
	meta(name="viewport",content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")
	title 上传自拍 爱心接力
	link(rel="stylesheet",type="text/css",href="#{resource}css/jquery.fullPage.css")
	link(rel="stylesheet",type="text/css",href="#{resource}css/index.css")
	link(rel="stylesheet",type="text/css",href="#{resource}css/animate.min.css")
	script(src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js")
	script.
		wx.config({
			debug: false,
			appId: '{{config.appId}}',
			timestamp: '{{config.timestamp}}'/1,
			nonceStr: '{{config.nonceStr}}',
			signature: '{{config.signature}}',
			jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo']
		});
	script(src="#{resource}js/jquery-2.1.3.min.js")
	script(src="#{resource}js/jquery.fullPage.min.js")
	script(src="#{resource}js/index.js")
body
	#dowebok
		.section
			audio(src="#{resource}img/bg.mp3",style="display:none",autoplay="autoplay",loop="loop")

			.box.p0
				.img-box(class="animated fadeIn",style="-webkit-animation-delay: 0s; ")
					.pic1(style="background-image:url({{user.picture_path}})")#userPhoto
					img(src="#{resource}img/big.png").pic2
				.t1(class="animated fadeIn",style="-webkit-animation-delay: 0.5s")
					img(src="#{resource}img/t/1/1.png",width="#{76 / 320 * 100 + '%'}")
				.t2(class="animated fadeIn",style="-webkit-animation-delay: 1s")
					| 我是第<span id="people">{{data.people}}</span>位参与者
					//img(src="#{resource}img/t/1/2.png",width="#{152/320*100 +'%'}")
				.t3(class="animated fadeIn",style="-webkit-animation-delay: 1.5s")
					img(src="#{resource}img/t/1/3.png",width="100%")
				.t4(class="animated fadeIn",style="-webkit-animation-delay: 2s")
					//| 爱心衬衫已募捐{{data.money}}元
					//img(src="#{resource}img/t/1/4.png",width="#{216/320*100 +'%'}")
					|此刻愿将世间幸运化为爱与星
				.t6(class="animated fadeIn",style="-webkit-animation-delay: 2.5s")
					//| 截止到{{data.year}}年{{data.month}}月{{data.day}}日12:00
					//img(src="#{resource}img/t/1/5.png",width="#{130/320*100 +'%'}")
					|密密缝在你衣领
				.t7(class="animated fadeIn",style="-webkit-animation-delay: 3s")#openShare
					img(src="#{resource}img/t/1/6.png",width="#{90 / 320 * 100 + '%'}")
			.box.p0-1
				.t1
					img(src="#{resource}img/t/7-1/1.png",width="100%")

		.section
			.box.p1
				.t1
					img(src="#{resource}img/3.png",width="#{303 / 320 * 100 + '%'}")
				.t2
					img(src="#{resource}img/t/2/1.png",width="100%")
				.t3
					img(src="#{resource}img/t/2/2.png",width="#{183 / 320 * 100 + '%'}")
				.t4
					img(src="#{resource}img/t/2/3.png",width="#{73 / 320 * 100 + '%'}")

		.section
			.box.p3
				.t1
					img(src="#{resource}img/4.png",width="100%")
					.t2
						img(src="#{resource}img/t/3/1.png",width="#{114 / 320 * 100 + '%'}")
					.t3
						img(src="#{resource}img/t/3/2.png",width="#{107 / 320 * 100 + '%'}").open-box
			.box.p3-1.open
				.t1
					img(src="#{resource}img/t/4/1.png",width="100%")
				.t2
					img(src="#{resource}img/t/4/2.png",width="#{268 / 320 * 100 + '%'}")
				.t3
					img(src="#{resource}img/t/4/3.png",width="#{268 / 320 * 100 + '%'}")
				.t4
					img(src="#{resource}img/c.png",width="#{26 / 320 * 100 + '%'}").c

		//.section
		//	.box.p4
		//		.t1
		//			.star-box
		//				//img(src="#{resource}img/starphoto/1.jpg",width="100%")
		//				video(width="100%",height="213",controls)
		//					source(src="#{resource}img/starvideo/1.mp4",type="video/mp4")
		//		.t2
		//			img(src="#{resource}img/t/5/1.png",width="100%")
		.section
			.box.p5
				.t1
					img(src="#{resource}img/t/6/1.png",width="#{130 / 320 * 100 + '%'}")
				.t2
					img(src="#{resource}img/t/6/2.png",width="100%")
				.t3
					img(src="#{resource}img/t/6/3.png",width="#{170 / 320 * 100 + '%'}").gotoNextPage
				.t4
					img(src="#{resource}img/t/6/4.png",width="#{170 / 320 * 100 + '%'}").open-box
		.section
			.box.p5-1
				.info-box
					.t1
						img(src="#{resource}img/t/6-1/1.png",width="100%")
					a(href="http://wap.koudaitong.com/v2/goods/mkamews1")
						.t2
					.t3
						img(src="#{resource}img/t/6-1/4.jpg",width="100%")#show-big-product
				.t4
					img(src="#{resource}img/t/7/6.png",width="100%")
			.box.p5-2#big-product



		.section
			.box.p6
				.t1
					img(src="#{resource}img/t/7/5.png",width="#{202 / 320 * 100 + '%'}")
				.t2
					img(src="#{resource}img/t/7/6.png",width="100%")
				.t3
					form#uploadForm
						.f1.form-box
							input(type="text")#name
						.f2.form-box
							input(type="text")#phone
						.f3.form-box#uploadBtn
						.f4.form-box#submitBtn
						input(type="hidden")#fileId
				.t4
					img(src="#{resource}img/t/2/2.png",width="#{183 / 320 * 100 + '%'}")
				p(style="display:node") {% csrf_token %}




script.
	wx.ready(function () {
		$('#uploadBtn').on('click', function () {
			wx.chooseImage({
				success: function (res) {
					var localIds = res.localIds; // 返回选定照片的本地ID列表
					wx.uploadImage({
						localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
						isShowProgressTips: 1, // 默认为1，显示进度提示
						success: function (res) {
							var serverId = res.serverId; // 返回图片的服务器端ID
							$('#fileId').val(serverId);
						}
					});
				}
			});
		});
		share(0);
	});


	//set csfrToken
	$.ajaxSetup({
		beforeSend: function (xhr, settings) {
			if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
				// Only send the token to relative URLs i.e. locally.
				var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;
				xhr.setRequestHeader("X-CSRFToken", csrfToken);
			}
		}
	});

	$('#submitBtn').on('click', function () {
		$('#uploadForm').submit();
	})

	$('#uploadForm').on('submit', function (event) {
		event.preventDefault();
		uploadUserData(uploadSuccess);
	});

	function uploadUserData(callback) {
		var data = {
			fileId: $('#fileId').val(),
			name: $('#name').val(),
			phone: $('#phone').val()
		};
		if ($.trim(data.fileId).length === 0) {
			alert('请上传头像');
			return;
		}
		if ($.trim(data.name).length === 0) {
			alert('请填写名字');
			return;
		}
		if ($.trim(data.phone).length === 0) {
			alert('请填写联系方式');
			return;
		}
		$.ajax({
			url: '/user/upload/',
			type: 'POST',
			data: data,
			dataType: 'json'
		}).success(function (res) {
			if (res.code !== 0) {
				alert(res.message);
				return;
			}
			callback(res.result);
		});
	}


	function showPhoto(src){
		$.fn.fullpage.moveTo(1);
		$('#people').html(parseInt($('#people').html(),10)+1)
		$('#userPhoto').attr("style","background-image:url("+src+")")
		$('#openShare').show();
	}

	//上传数据成功，弹出分享指引
	function uploadSuccess(result) {
		var src = result.photo;
		showPhoto(src);
		share(result.id);
		$('#fileId').val('');
	}




	//分享
	function share(userId) {
		var host = location.protocol + '//' + location.host;
		if(userId == 0){
			var url = location.href;
		}else{
			var url = host + '?user=' + userId;
		}
		var imgUrl = $('#userPhoto').css('background-image').split(')')[0].split('(')[1];
		var shareTitle = '我是第'+$('#people').html()+'位接力者 爱心接力，由你传递！';
		var shareDesc = '上传自拍 爱心接力';
		wx.onMenuShareTimeline({
			title: shareTitle, // 分享标题
			link: url, // 分享链接
			imgUrl: imgUrl, // 分享图标
			success: function () {
				shareSuccess();
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
		wx.onMenuShareAppMessage({
			title: shareTitle, // 分享标题
			desc: shareDesc, // 分享描述
			link: url, // 分享链接
			imgUrl: imgUrl, // 分享图标
			type: 'link', // 分享类型,music、video或link，不填默认为link
			dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			success: function () {
				shareSuccess();// 用户确认分享后执行的回调函数
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
		wx.onMenuShareQQ({
			title: shareTitle, // 分享标题
			desc: shareDesc, // 分享描述
			link: url, // 分享链接
			imgUrl: imgUrl, // 分享图标
			success: function () {
				shareSuccess();// 用户确认分享后执行的回调函数
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
		wx.onMenuShareWeibo({
			title: shareTitle, // 分享标题
			desc: shareDesc, // 分享描述
			link: url, // 分享链接
			imgUrl: imgUrl, // 分享图标
			success: function () {
				shareSuccess();// 用户确认分享后执行的回调函数
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
	}

	//分享成功回调
	function shareSuccess() {
		//code
	}









